<template>
    <div class="page">
        <paginationView v-model="current" :page-size-options="pageSizeOptions" :show-size-changer="showSizeChanger" :show-quick-jumper="showQuickJumper" :total="total" show-size-changer :page-size="pagesize" @change="change" @showSizeChange="onShowSizeChange" :pageSize.sync="currentPageSize" :simple="simple" :size="size" :show-total="total => `共 ${total} 条`" />
    </div>
</template>
<script>
    import paginationView from 'ant-design-vue/lib/pagination';
    import 'ant-design-vue/lib/pagination/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: 'Pagination',
        components: {
          paginationView,
        },
        props: {
            // 当前页
            value: {
                type: Number,
            },
            // 只有一页时是否隐藏分页器	
            hideOnSinglePage: {
                type: Boolean,
                default: false,
            },
            // 每页显示多少条
            pagesize: {
                type: Number,
                default: 10,
            },
            // 指定每页可以显示多少条	
            pageSizeOptions: {
                type: Array,
                default () {
                    return ['10', '20', '30', '40', '50']
                },
            },
            // 是否可以快速跳转至某页	
            showQuickJumper: {
                type: Boolean,
                default: true,
            },
            // 是否可以改变 pageSize	
            showSizeChanger: {
                type: Boolean,
                default: false,
            },
            // 当添加该属性时，显示为简单分页	
            simple: {
                type: Boolean,
                default: false,
            },
            // 当为「small」时，是小尺寸分页	
            size: {
                type: String,
                default: '',
            },
            // 数据总数	
            total: {
                type: Number,
                default: 1,
            },
        },
        data() {
            return {
                current: this.value,
                currentPageSize: this.pagesize,
            };
        },
        watch: {
            value(val) {
                this.current = val
            },
            pagesize(val) {
                this.currentPageSize = val
            },
        },
        methods: {
            change(pageno, pagesize) { //页码，条数
                this.$emit('change', pageno, pagesize)
            },
            onShowSizeChange(current, size) { //条数变化的回调
                this.$emit('onShowSizeChange', current, size)
            },
        },
    };
</script>
<style scoped>
    .page {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
</style>